<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta charset="UTF-8">
    <title></title>
    <style>

        /* > 700px */
        @media screen and (min-width: 700px) {
            .sidebar {
                width: 34%;
                float: left;
            }

            .content {
                width: 65%;
                float: right;
            }
        }

        /* 480px ~ 700px*/
        @media screen and (max-width: 700px) {
            .sidebar {
                width: auto;
                float: none;
            }

            .content {
                width: auto;
                float: none;
            }
        }

        /* 0 ~ 480px*/
        @media screen and (max-width: 480px) {
            .head {
                height: 50px;
            }

            .sidebar {
                width: auto;
                float: none;
            }

            .content {
                width: auto;
                float: none;
            }
        }

        div.container {
            /*margin: 10px 10px 10px 10px;*/
        }

        div.head {
            height: 100px;
            border: 1px solid #ccc;
            margin-bottom: 5px;
        }

        div.content {
            height: auto;
            border: 1px solid #ccc;
            margin-bottom: 5px;
            background: #f8f8f8;
            /*width: 65%;*/
            /*float: right;*/
        }

        div.sidebar {
            height: auto;
            border: 1px solid #ccc;
            margin-bottom: 5px;
            background: #f0f0f0;
            /*width: 34%;*/
            /*float: left;*/
        }

        div.footer {
            height: 100px;
            border: 1px solid #ccc;
            clear: both;
        }

    </style>
</head>
<body>
<div id="container" class="container">
    <div id="head" class="head">
        <h1>header</h1>
    </div>

    <div id="sidebar" class="sidebar">
        <h1>sidebar</h1>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">How-to</a></li>
            <li><a href="#">Icons</a></li>
            <li><a href="#">Design</a></li>
            <li><a href="#">Web 2.0</a></li>
            <li><a href="#">Tools</a></li>
        </ul>
    </div>

    <div id="content" class="content">
        <h1>content</h1>
    </div>

    <div id="footer" class="footer">
        <h1>footer</h1>
    </div>
</div>
</body>
</html>